<template>
	<view class="list_box">
		<view class="left">
			<scroll-view scroll-y="true" :style="{ 'height':scrollHeight }">
				<view class="item" v-for="(item,index) in leftArray" :key="index"  :class="{ 'active':index==leftIndex }"
				 :data-index="index" @tap="leftTap" >
					<text :style="{'font-size':'26rpx'}"> 
					 <Am-FontAwesome v-if="item.id==='0'"  type="fas fa-th-list" size="50" fw :color="color"></Am-FontAwesome>
					<Am-FontAwesome v-if="item.id==='418337' || item.id==='525466'"  type="fas fa-hammer" size="50" fw :color="color"></Am-FontAwesome>
					 <Am-FontAwesome v-if="item.id==='123150'"  type="fas fa-shipping-fast" size="50" fw :color="color"></Am-FontAwesome>
					 <Am-FontAwesome v-if="item.id==='123151'"  type="fas fa-people-carry" size="50" fw :color="color"></Am-FontAwesome>
					 <Am-FontAwesome v-if="item.id==='123152'"  type="fas fa-hourglass-start" size="50" fw :color="color"></Am-FontAwesome>
					 <Am-FontAwesome v-if="item.id==='123153'"  type="fas fa-hospital-alt" size="50" fw :color="color"></Am-FontAwesome>
					 <Am-FontAwesome v-if="item.id==='123155'"  type="fas fa-plane-departure" size="50" fw :color="color"></Am-FontAwesome>
					 <Am-FontAwesome v-if="item.id==='165368'"  type="fas fa-signal" size="50" fw :color="color"></Am-FontAwesome>
					<!-- {{item.id}} -->
					</br>
					<h4 style="color: #5F5F5F; line-height:2.0em;">{{item.name}}</h4>
					</text>
				</view>
			</scroll-view>
		</view>
		<view class="main">
			<swiper @change="swiperChange" class="swiper" :style="{ 'height':scrollHeight }" :current="leftIndex" vertical="true"
			 duration="300">
				<swiper-item v-for="(item,index) in leftArray" :key="index">
					<scroll-view scroll-y="true" :style="{ 'height':scrollHeight }">
						<view v-for="(mainArrayItem,index1) in chil" :key="index1" :class="{ 'item':true}"
						 :data-index="index1" @tap="rightTap(mainArrayItem)">
					<!-- {{mainArrayItem.id}} -->
						<view   class="icon">
			   <Am-FontAwesome v-if="mainArrayItem.id==='999995'" type="fas fa-signal" size="50" fw :color="color"></Am-FontAwesome> 
				<Am-FontAwesome v-if="mainArrayItem.id==='999996'" type="fas fa-file-signature" size="50" fw :color="color"></Am-FontAwesome> 
				 <Am-FontAwesome v-if="mainArrayItem.id==='418340' || mainArrayItem.id==='525469'" type="fas fa-edit" size="50" fw :color="color"></Am-FontAwesome> 
				  <Am-FontAwesome v-if="mainArrayItem.id==='999998'" type="far fa-chart-bar" size="50" fw :color="color"></Am-FontAwesome> 
				   <Am-FontAwesome v-if="mainArrayItem.id==='999997'" type="fas fa-chart-area" size="50" fw :color="color"></Am-FontAwesome> 
					<Am-FontAwesome v-if="mainArrayItem.id==='999999'" type="fas fa-chart-bar" size="50" fw :color="color"></Am-FontAwesome> 
					 <Am-FontAwesome v-if="mainArrayItem.id==='277361'" type="fas fa-coins" size="50" fw :color="color"></Am-FontAwesome> 
					   <Am-FontAwesome v-if="mainArrayItem.id==='165425'" type="fas fa-history" size="50" fw :color="color"></Am-FontAwesome> 
						<Am-FontAwesome v-if="mainArrayItem.id==='165422'" type="fas fa-cube" size="50" fw :color="color"></Am-FontAwesome> 
					 	 <Am-FontAwesome v-if="mainArrayItem.id==='165413'" type="fas fa-cubes" size="50" fw :color="color"></Am-FontAwesome> 
						   <Am-FontAwesome v-if="mainArrayItem.id==='165410'" type="fab fa-docker" size="50" fw :color="color"></Am-FontAwesome> 
							<Am-FontAwesome v-if="mainArrayItem.id==='165408'" type=" fas fa-fighter-jet" size="50" fw :color="color"></Am-FontAwesome> 
							 <Am-FontAwesome v-if="mainArrayItem.id==='123673'||mainArrayItem.id==='123674'" type=" fas fa-shopping-cart" size="50" fw :color="color"></Am-FontAwesome> 
							  <Am-FontAwesome v-if="mainArrayItem.id==='124165'|| mainArrayItem.id==='165472'" type=" fas fa-truck" size="50" fw :color="color"></Am-FontAwesome> 
							   <Am-FontAwesome v-if="mainArrayItem.id==='123951'||mainArrayItem.id==='124050'" type=" fas fa-baby-carriage" size="50" fw :color="color"></Am-FontAwesome> 
							    <Am-FontAwesome v-if="mainArrayItem.id==='165382'" type=" fas fa-cart-arrow-down" size="50" fw :color="color"></Am-FontAwesome> 
								 <Am-FontAwesome v-if="mainArrayItem.id==='124177'" type=" fas  fa-cart-plus" size="50" fw :color="color"></Am-FontAwesome> 
								  <Am-FontAwesome v-if="mainArrayItem.id==='124323'" type=" fas  fa-dolly" size="50" fw :color="color"></Am-FontAwesome> 
								   <Am-FontAwesome v-if="mainArrayItem.id==='124179'" type=" fas fa-recycle" size="50" fw :color="color"></Am-FontAwesome> 
								    <Am-FontAwesome v-if="mainArrayItem.id==='124262'" type=" fas fa-clinic-medical" size="50" fw :color="color"></Am-FontAwesome> 
									 <Am-FontAwesome v-if="mainArrayItem.id==='124310'" type=" fas fa-redo" size="50" fw :color="color"></Am-FontAwesome> 
									  <Am-FontAwesome v-if="mainArrayItem.id==='165390'|| mainArrayItem.id==='191290'|| mainArrayItem.id==='166371'" type=" fas fa-dolly-flatbed" size="50" fw :color="color"></Am-FontAwesome> 
									    <Am-FontAwesome v-if="mainArrayItem.id==='165371' || mainArrayItem.id==='165372'" type=" fas fa-search" size="50" fw :color="color"></Am-FontAwesome> 
							</view>
							<text :style="{'font-size':'26rpx'}">
								{{mainArrayItem.name}}
							</text>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	//这里是图标库表单后面的图标
	import AmFontAwesome from '../Am-FontAwesome/index.vue';
	export default {
		components: {
			AmFontAwesome
		},
		props: {
			/**
			 * data要传入的数据数组
			 */
			leftArray: {
				type: Array,
				default () {
					return []
				}
			},
			chil: {
				type: Array,
				default () {
					return []
				}
			},
			leftIndex:{
			type:Number,
			default:""
			}
		},
		name: 'bookCategory',
		data() {
			return {  //这里设置滚动高度
				scrollHeight: '1200px',
				fontcolor:{
				color:this.$kdup.color,
				borderLeft:'18px solid '+ this.$kdup.color,
				},
				color:this.$kdup.color,
			}
		},
		onLoad() {
			/* 设置当前滚动容器的高，若非窗口的高度，请自行修改 */
			uni.getSystemInfo({
				success: (res) => {
					this.scrollHeight = `${res.windowHeight}px`;
				}
			});
		},
		methods: {
			leftTap(e) {
			     let index = e.currentTarget.dataset.index;
				 // this.leftIndex = Number(index);
				 this.$emit('getbyid', Number(index))
				 console.log(e.currentTarget);
				
			},
			rightTap(e) {
				this.$emit('getbyid', this.leftIndex)
				
				//如果等于库存查询编码则跳转至查询页面
				if(e.number=="Barcode_Inv_Look" || e.number=="Material_Inv_Look"){
					uni.navigateTo({
						url: '/pages/querystock/querystock?id=' + e.id + "&name=" + e.name
					})
				}else if(e.number=="Bulletin_Board"){
					uni.navigateTo({
						url:'/pages/DayView/DayView?name=ucharts1&sumcount='+0
					}); 
					}
					  //这里本来是跳转到生产看板全工序现在改成跳转到看板（日报表）
				else if(e.number=="board_board")
					  {
						  uni.navigateTo({
						   url: '/pages/board/board'
						  });	
					  }
				else if(e.number=="Bulletin_Board_Curr"){
					   uni.navigateTo({
					    url: '/pages/boardcurr/boardcurr'
					   })	
				}else if(e.number=="Bulletin_Board_Track"){
					   uni.navigateTo({
					    url: '/pages/boardtrack/boardtrack'
					   })	
				}
				else if(e.number=="scrk_fs"){
					   uni.navigateTo({
					    url: '/pages/scrk_fs/scrk_fs'
					   })	
				}
				else if(e.number=="SCRK_FS"){
					   uni.navigateTo({
					    url: '/pages/scrk_fs/scrk_fs'
					   })	
				}else if(e.number=="PCD_RBB"){
					   uni.navigateTo({
					    url: '/pages/dayechearts/dayechearts'
					   })	
				}else{
				uni.navigateTo({           
					url: '/pages/scancode/scancode'
				})	
				}
			},
			swiperChange(e) {	
				 this.$emit('getbyid', e.detail.current)
			}
		}
	}
</script>

<style lang="scss">
	.icon{
	 position: relative;
	 left: 30%;
	 top: 15%;
	}
	.list_box {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
		font-size: 26rpx;
		.left {
			height: 10%;
			width: 180rpx;
			background-color: #f0f0f0;
			box-sizing: border-box;
			font-size: 26rpx;
			text-align: center;
			color: #000000;

			.item {
				position: relative;
				height: 155rpx;
				text {
					display: block;
					width: 130rpx;
					text-align: center;
					position: relative;
					margin: 0 auto;
					top: 50%;
					transform: translateY(-50%);
				}

				&.active,
				&:active {
				
					background-color: #fff;
					&::after {
						content: '';
						display: block;
						position: absolute;
						top: 3rpx;
						left: 0;
						transform: scaleY(0.5);
					  border-top: 40px solid transparent;
					  border-bottom: 40px solid transparent;
					}
				}
			}
		}

		.main {
			background-color: #fff;
			padding-left: 22rpx;
			width: 0;
			flex-grow: 1;
			box-sizing: border-box;

			.swiper {
				// height: 500px;
			}

			.title {
				line-height: 64rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #666;
				background-color: #fff;
				position: sticky;
				top: 0;
				z-index: 999;
			}

			.item {
				background-color: #ffffff;
				margin-top: 12rpx;
				width: 150rpx;
				// height: 100rpx;
				height: 150rpx;
				 border-radius: 5%;
				border: 1px dashed rgba(255, 255, 255, 1.0);
				float: left;
				margin-right: 20rpx;
				margin-bottom: 15rpx;
				color: #2C343F;
				

				text {
					display: block;
					width: 120rpx;
					text-align: center;
					position: relative;
					margin: 0 auto;
					top: 40%;
					transform: translateY(-50%);
				}

				&.active,
				&:active {
					color: #00BFFF;
					border-color: #00BFFF;
				}
			}

			.goods {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-items: center;
				align-content: center;
				margin-bottom: 10rpx;

				&>image {
					width: 120rpx;
					height: 120rpx;
					margin-right: 16rpx;
				}

				.describe {
					font-size: 24rpx;
					color: #999;
				}

				.money {
					font-size: 24rpx;
					color: #efba21;
				}
			}
		}
	}
</style>
